<!--
 * @Author: Your Name you@example.com
 * @Date: 2023-01-05 16:41:37
 * @LastEditors: Your Name
 * @LastEditTime: 2023-02-05 12:01:03
 * @Description: file content
-->
<!DOCTYPE html>
<html>

<head>
    <meta name="Author" content="微普科技http://www.wiipu.com" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>html+css实现左侧菜单样式</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #zmkt {
            width: 200px;

        }

        #zmkt li {
            height: 50px;
            color:#101a0a;
            border-right: 2px solid #888;
            padding-right: 20px;
            line-height: 50px;
            text-align: right;
        }

        #zmkt li:hover {
            font-weight: bolder;
            color: #bd002a;
            border-right: 2px solid #bd002a;
        }
    </style>
</head>

<body>
    <!--提示:使用html+css完成图示左侧垂直菜单样式，
宽为200px,每条高为50px,字体颜色为#101a0a，
右边框为2px,边框颜色为#888,边框与文字间距20px,
鼠标移入时字体加粗，字体和边框颜色为#bd002a-->
    <ul id="zmkt">
        <li>首页</li>
        <li>联系方式</li>
        <li>地理位置</li>
        <li>关于我们zmkf</li>
    </ul>
</body>

</html>